<template>
  <div class="flex">
    <NavBar></NavBar>
    <!--<login @updateif="updateif1"></login>-->
    <div class="input">
      <input class="input1" placeholder="风水画，国画竹子，启功体" v-model="name"/>
      <div class="input2" @click="search">
        <p class="find">搜索</p>
      </div>
    </div>
    <div class="swiper-wrap">
      <swiper class="swiper-inner" @change="swiperChange" :indicator-dots="indicator" :current="cur"
              :circular="circular" :autoplay="autoplay" :interval="interval" :duration=
                "duration">
        <block v-for="(item,index) in imgUrls" :index="index" :key="key">
          <swiper-item class="banner-img">
            <image :src="item.hpUrl" mode="widthFix" @click="swipclick(index)"></image>
          </swiper-item>
        </block>
      </swiper>
      <!--重置小圆点的样式  -->
      <view class="dots">
        <block v-for="(item,index) in imgUrls" :index="index" :key="key">
          <view class="dot" :class="{'active':  index == cur}"></view>
        </block>
      </view>
      <!--重置小圆点的样式 end -->
    </div>

    <div style="height: 58px">
      <div class="block">
        <text class="font1">浦江书画</text>
      </div>
    </div>
    <div class="product">
      <div class="paingting" v-for="(list,index) in arrList" :key="index" @click="gotoPainting(list.paintingId)">
        <div class="rightullidiv">
          <img
            mode="aspectFit"
            :src="list.pmUrl"
            alt=""
            class="rightulliimg"
          >
        </div>
        <div class="isSale" v-if="list.isSole === 1">
          <text class="sale-text">该作品已售出</text>
        </div>
        <div class="undertone-white">
          <text class="title">{{list.paintingName}}</text>
          <text class="price">¥{{list.paintingPrice}}</text>
          <div class="content-div">
            <text class="content">{{list.paintingInfo}}</text>
          </div>
          <div class="desc1">抢购倒计时</div>
          <div class="desc2">
            <div class="desc">
              <div class="figure-text1" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">
                <p style="color: white;margin-left: 3px">{{list.anumber}}</p>
              </div>
              <div class="figure-text3" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">
                <p style="color: white;margin-left: 3px">{{list.anumber1}}</p>
              </div>
              <text class="mid-text2" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">:</text>
              <div class="figure-text2" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">
                <p style="color: white;margin-left: 3px">{{list.anumber2}}</p>
              </div>
              <div class="figure-text3" v-if="list.countDown !== '已结束' && list.countDown !=='未开始'">
                <p style="color: white;margin-left: 3px">{{list.anumber3}}</p>
              </div>
            </div>
            <div class="countdown-text1">
              <text class="djs1" v-if="list.countDown === '已结束' || list.countDown ==='未开始'">{{list.countDown}}
              </text>
            </div>
          </div>
            <div class="row">
              <div class="style-div" v-for="(item,placeIndex) in list.paintingStyleDTOS" :key="placeIndex"
                   v-if="placeIndex<3">
                <text class="style">{{item.pgsName}}</text>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import card from '@/components/card'
  import NavBar from '@/components/navbar'
  import login from '@/components/login'

  export default {
    data() {
      return {
        imgUrls: [],
        indicator: true, //是否显示指示点
        interval: 5000,  //自动切换时间间隔
        duration: 400,  //滑动动画时长
        autoplay: true, //是否自动切换
        circular: true, //是否采用衔接滑动
        cur: 0,         //当前所在滑块的index
        motto: 'Hello miniprograme',
        userInfo: {
          nickName: 'mpvue',
          avatarUrl: 'http://mpvue.com/assets/logo.png'
        },
        content: '',
        arrList: [], // 列表数据
        start: 0,
        length: 10,
        name: '',
        flag: 0,
      }
    },
    components: {
      card,
      NavBar,
      login
    },

    onLoad() {
      wx.showShareMenu({
        withShareTicket: true
      })
    },

    onReachBottom() {

      this.getList()
    },

    onPullDownRefresh() {
      this.start = 0;
      this.getList();
      this.getHomePic();
    },

    created() {
      setInterval(this.timer, 1000);
    },
    onShow() {
      this.getHomePic();
      this.getList();
    },

    methods: {
      updateif1(flag) {
        if (flag === 1) {
          this.getHomePic();
          this.getList();
        }
      },
      getHomePic() {
        this.$requestNoToken.post({
          url: '/api/homePic/query4Mobile',
          data: {}
        }).then(res => {
          this.imgUrls = res;
          console.log(this.imgUrls);
        })
      },

      //轮播图的切换事件
      swiperChange(e) {
        // console.log(e)
        this.cur = e.target.current  //获取当前轮播图片的下标, 可以给当前指示点加样式
      },
      swipclick(index) {
        this.$router.open({
          url: this.imgUrls[index].url
        })
      },

      timer: function () {
        for (let i in this.arrList) {
          let open_str = (this.arrList[i].gmtOpen).replace(/-/g, "/");
          let openTime = new Date(open_str);
          let nowTime = new Date();
          let end_str = (this.arrList[i].gmtEnd).replace(/-/g, "/");
          let endTime = new Date(end_str);
          let t = endTime.getTime() - nowTime.getTime();
          let t1 = nowTime.getTime() - openTime.getTime();
          if (t1 < 0) {
            this.arrList[i].countDown = '未开始'
          } else if (t > 0 && t1 > 0) {
            //let day = Math.floor(t / 86400000);
            let hour = Math.floor((t / 3600000));
            let min = Math.floor((t / 60000) % 60);
            //let sec = Math.floor((t / 1000) % 60);
            hour = hour < 10 ? "0" + hour : hour;
            min = min < 10 ? "0" + min : min;
            //sec = sec < 10 ? "0" + sec : sec;
            let format = '';
            if (hour >= 100) {
              format = ` 99ㅤ59 `;
            } else if (hour > 0 && hour < 100) {
              format = ` ${hour} ${min} `;
            } else if (hour <= 0) {
              format = ` 00ㅤ${min} `;
            }
            this.arrList[i].countDown = format;
            this.cutdown = Array(hour);
            this.arrList[i]['anumber'] = parseInt(this.cutdown.length / 10);
            this.arrList[i]['anumber1'] = parseInt(this.cutdown.length % 10);
            this.cutdown1 = Array(min);
            this.arrList[i]['anumber2'] = parseInt(this.cutdown1.length / 10);
            this.arrList[i]['anumber3'] = parseInt(this.cutdown1.length % 10);
          } else {
            this.arrList[i].countDown = '已结束';
          }
        }
      },

      _callback() {
        if (this.callback && this.callback instanceof Function) {
          this.callback(...this);
        }
      },
      getList() {
        var self = this;
        self.$requestNoToken.post({
          url: '/api/painting/list4Mobile',
          data: {
            'start': self.start,
            'length': self.length,
          },
        }).then(res => {
          console.log(res);
          // 返回的数据
          if (self.start !== 0) {
            // 数据追加
            console.log(res.length);
            for (let i = 0; i < res.length; i++) {
              if (res[i].paintingInfo == null) {
                res[i].paintingInfo = '暂无介绍'
              }
            }
            for (let i = 0; i < res.length; i++) {
              self.arrList.push(res[i])
            }
            self.start = self.start + self.length;
            console.log(self.arrList);
          } else {
            // 数据
            self.start = self.start + self.length;
            self.arrList = res;
            for (let i = 0; i < self.arrList.length; i++) {
              if (self.arrList[i].paintingInfo == null) {
                self.arrList[i].paintingInfo = '暂无介绍'
              }
            }
            console.log(self.arrList);
          }
          // 总页数
        })
      },
      gotoPainting(paintingId) {
        const url = '/pages/productDetail/main?paintingId=' + paintingId;
        wx.navigateTo({url})
      },
      search() {
        this.arrList = [];
        this.$requestNoToken.post({
          url: '/api/painting/list4Mobile',
          data: {
            "start": 0,
            "length": 200,
            "queryText": this.name
          },
        }).then(res => {
          for (let i = 0; i < res.length; i++) {
            if (res[i].paintingInfo == null) {
              res[i].paintingInfo = '暂无介绍'
            }
          }
          this.arrList = res;
        })
      }
    },
    // onShareAppMessage: function(res) {
    //   var that = this;
    //   return {
    //
    //     title: 'xxx小程序',
    //
    //     path:'/pages/productDetail/main?paintingId=1' ,
    //
    //     success: function(res) {
    //
    //       console.log("转发成功:" + JSON.stringify(res));
    //
    //       that.shareClick();
    //
    //     },
    //
    //     fail: function(res) {
    //
    //       console.log("转发失败:" + JSON.stringify(res));
    //
    //     }
    //
    //   }
    //
    // }
  }
</script>

<style scoped>
  .flex {
    display: flex;
    flex-direction: column;
  }

  .swiper-wrap {
    width: 100%;
    height: 320px;
    background-color: #ffffff;
  }

  .swiper-inner {
    width: 375px;
    height: 320px;
    margin: 0 auto;
  }

  .banner-index {
    width: 345px;
    height: 75px;
  }

  .swiper-wrap image {
    height: 100%;
    width: 100%;
  }

  .dots {
    position: relative;
    right: 0;
    bottom: 6px;
    left: 0;
  }

  /*未选中时的小圆点样式 */
  .dot {
    margin-right: 4px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, .4);
  }

  /*选中以后的小圆点样式  */
  .active {
    background-color: white;
  }

  .input {
    position: absolute;
    margin-top: 96px;
    margin-left: 24px;
    display: flex;
    flex-direction: row;
    z-index: 10;
  }

  .input1 {
    width: 230px;
    height: 30px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(151, 137, 137, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    padding-left: 12px;
  }

  .input2 {
    background: rgba(144, 42, 38, 1);
    margin-right: 24px;
    width: 80px;
    height: 32px;
    text-align: center;
  }

  .find {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: rgba(255, 255, 255, 1);
    line-height: 32px;
  }

  .block {
    margin-left: 87px;
    margin-top: 12px;
    width: 202px;
    height: 32px;
    background: rgba(0, 0, 0, 1);
  }

  .font1 {
    margin-left: 63px;
    line-height: 32px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }

  .product {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(244, 246, 248);
  }

  .paingting {
    margin-bottom: 8px;
  }

  .rightullidiv {
    width: 375px;
    height: 160px;
    background-color: rgba(236, 238, 240, 1);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rightulliimg {
    /*background-size:contain;*/
    width: 100%;
    height: 100%;
  }

  .undertone-white {
    width: 375px;
    height: 170px;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
  }

  .title {
    margin-top: 10px;
    margin-left: 12px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(47, 49, 51, 1);
    line-height: 22px;
  }

  .price {
    margin-top: 8px;
    margin-left: 12px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(225, 140, 30, 1);
    line-height: 25px;
  }

  .content-div {
    margin-left: 12px;
    margin-top: 10px;
    height: 43px;
    width: 351px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .content {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
  }

  .row {
    margin-top: -53px;
    display: flex;
    flex-direction: row;
    padding-bottom:5px;
  }

  .style-div {
    margin-top: 12px;
    margin-left: 12px;
    width: 52px;
    height: 24px;
    border: 1px solid rgba(144, 42, 38, 1);
    text-align: center;
  }

  .style {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(144, 42, 38, 1);
    line-height: 24px;
  }

  .countdown-div {
    margin-top: 18px;
    margin-left: 240px;
  }

  .countdown-text {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(114, 117, 121, 1);
    line-height: 17px;
  }

  .djs {
    font-size: 17px;
    color: rgb(255, 255, 255);
  }

  .isSale {
    position: absolute;
    margin-top: -26px;
    width: 375px;
    height: 26px;
    background: rgba(144, 42, 38, 1);
    text-align: center;
    z-index: 10;
  }

  .sale-text {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 18px;
  }

  .desc {
    display: flex;
    flex-direction: row;
    height: 30px;
  }

  .desc1 {
    margin-top: 20px;
    margin-left: 200px;
    width: 100px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 20px;
  }

  .desc2 {
    margin-top: -12px;
    margin-left: 210px;
    display: flex;
    flex-direction: row;
  }

  .figure-text1 {
    margin-top: -10px;
    margin-left: 63px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }

  .figure-text3 {
    margin-top: -10px;
    margin-left: 3px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }

  .figure-text2 {
    margin-top: -10px;
    margin-left: 15px;
    width: 15px;
    height: 25px;
    background: rgba(217, 49, 42, 1);
  }



  .djs1 {
    font-size: 15px;
    font-weight: 400;
    color: rgb(255, 5, 17);
  }

  .countdown-text1 {
    margin-top: -9px;
    margin-left: 66px;
  }

  .mid-text2 {
    margin-left: 8px;
    height: 30px;
    margin-top: -10px;
  }

  .banner-img {
    display: flex;
    flex-direction: column-reverse;
  }

  .row1{
    display: flex;
    flex-direction: row;
  }
</style>
